import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { ScrollTopBar, Header } from '../../component';
import CourseNew from './CourseNew'
import CourseRulte from './CourseRulte'
import CommonProblem from './CommonProblem'

export default class BeginnerGuide extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            index: 0
        };
    }

    /**
     * 渲染Header
     */
    renderHeader() {
        return (
            <Header title="新手指南" onLeftPress={() => this.props.navigation.goBack()} />
        )
    }

    renderScrollTab() {
        return (
            <ScrollTopBar
                topBarUnderlineStyle={{ backgroundColor: '#8e8df2', width: 40, height: 3, borderRadius: 3 }}
                labelList={['新手入门', '规则详情', '常见问题']}
                topBarInactiveTextColor='#8e8df2'
                topBarActiveTextColor="#8e8df2"
                topBarBackgroundColor="#FFFFFF"
                onChange={e => this.setState({ index: e })}
            >

                <CourseNew navigation={this.props.navigation} />
                <CourseRulte navigation={this.props.navigation} />
                <CommonProblem navigation={this.props.navigation} />
            </ScrollTopBar>
        )
    }

    render() {
        return (
            <View style={Styles.container}>
                {this.renderHeader()}
                {this.renderScrollTab()}
            </View>
        )
    }
}

const Styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff'
    },
    header: {
        backgroundColor: '#8e8df2',
        justifyContent: "space-between",
        alignItems: "center"
    },
    body: {
        backgroundColor: '#8e8df2',
    },
    title: {
        fontSize: 14,
        color: 'white',
    },
});
